<!--
 * @Date: 2024-06-26 10:09:02
 * @LastEditors: 陈俊宇 467724386@qq.com
 * @LastEditTime: 2024-11-14 09:13:02
-->
<template>
    <div class="form-container">
        <div class="header">
            <div>Email Ticket</div>
            <img src="@/assets/close.png" class="close" alt="" @click="emit('close')" />
        </div>

        <div v-if="state.isSuccess" class="success">
            <div>
                <img class="img" src="@/assets/success.png" alt="" />

                <div>Thank you for your feedback.</div>
                <div>We will reply as soon as possible.</div>
            </div>

            <el-button class="btn" type="primary" @click="emit('close')"> Close </el-button>
        </div>

        <div class="form">
            <el-form :model="state.form" :rules="state.rules" ref="ruleForm" label-position="left">
                <div class="title">
                    Dear customer! Please fill in the following information to submit ticket, and we
                    will respond to you as soon as possible during the business day.
                </div>

                <el-form-item label="Email" prop="applyEmail">
                    <el-input v-model="state.form.applyEmail" size="large"></el-input>
                </el-form-item>

                <el-form-item label="Country/Region" prop="applyCountry">
                    <el-select v-model="state.form.applyCountry" filterable clearable size="large">
                        <el-option
                            v-for="item in countryList"
                            :key="item.englishAbbreviation"
                            :label="item.englishAbbreviation"
                            :value="item.englishAbbreviation"
                        />
                    </el-select>
                </el-form-item>

                <el-form-item label="Subject" prop="subject">
                    <el-input v-model="state.form.subject" size="large"></el-input>
                </el-form-item>

                <el-form-item label="Product Model" prop="productId">
                    <el-select
                        v-model="state.form.productId"
                        filterable
                        remote
                        placeholder="Please enter keywords to search"
                        :remote-method="remoteMethod"
                        :loading="state.selectLoading"
                        class="select"
                        @change="changeProduct"
                        size="large"
                    >
                        <el-option
                            v-for="item in state.modelData"
                            :key="item.key"
                            :label="item.label"
                            :value="item.key"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="Serial Number" prop="productSn">
                    <el-input v-model="state.form.productSn" size="large"></el-input>
                </el-form-item>

                <el-form-item label="Ticket Type" prop="ticketTypeId">
                    <el-select v-model="state.form.ticketTypeId" size="large">
                        <el-option
                            v-for="item in state.ticketTypeList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                        />
                    </el-select>
                </el-form-item>

                <el-form-item label="Description" prop="describeContent">
                    <Editor
                        v-model="state.form.describeContent"
                        @update:modelValue="changeDesContent"
                    ></Editor>
                </el-form-item>

                <el-form-item label="Attachments" prop="files">
                    <Upload @success="onSuccess" :limit="5"> Upload file </Upload>
                </el-form-item>
            </el-form>
        </div>

        <div class="form-footer">
            <div class="checkbox">
                <el-checkbox v-model="state.checked" size="large" class="check" />
                I have read and agree to the
                <span class="privacy" @click="state.show = true">Privacy Policy</span>.
            </div>

            <div class="btn-list">
                <el-button class="btn" @click="emit('close')"> Cancel </el-button>
                <el-button class="btn" type="primary" @click="submitForm(ruleForm)">
                    Submit
                </el-button>
            </div>
        </div>

        <Privacy :show="state.show" @close="state.show = false"></Privacy>
    </div>
</template>

<script setup>
import Upload from '@/components/Upload/Upload.vue'
import Editor from '@/components/Editor/Editor.vue'
import { onMounted, reactive, ref } from 'vue'
import { ticketProductCategory, modelList, ticketType, submitTicketForm } from '@/api'
import Privacy from '@/components/Privacy/Privacy.vue'
import { ElMessage } from 'element-plus'

const props = defineProps({
    countryList: {
        type: Array,
        default: () => {
            return []
        },
    },
})

const emit = defineEmits(['close'])

const ruleForm = ref()

const state = reactive({
    form: {
        files: '',
    },
    show: false,
    checked: false,
    category: [],
    ticketTypeList: [],
    isSuccess: false,
    selectLoading: false,
    modelData: [],
    rules: {
        applyEmail: [
            {
                required: true,
                message: 'Email is required.',
                trigger: 'blur',
            },
            {
                type: 'email',
                message: 'Please enter a valid email address.',
                trigger: 'blur',
            },
        ],
        applyCountry: [
            {
                required: true,
                message: 'Country/Region is required.',
                trigger: 'change',
            },
        ],
        subject: [
            {
                required: true,
                message: 'Subject is required.',
                trigger: 'blur',
            },
        ],
        productId: [
            {
                required: true,
                message: 'Product Model is required.',
                trigger: 'change',
            },
        ],
        describeContent: [
            {
                required: true,
                message: 'Description is required.',
                trigger: 'change',
            },
        ],
        productSn: [
            {
                required: true,
                message: 'Serial Number  is required.',
                trigger: 'blur',
            },
            {
                pattern: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]+$/,
                message: 'Product SN should contain letters and numbers.',
                trigger: 'blur',
            },
        ],
        ticketTypeId: [
            {
                required: true,
                message: 'Ticket Type is required.',
                trigger: 'change',
            },
        ],
    },
})

onMounted(() => {
    getTicketProduct()
    getTicketType()
})

const submitForm = async (formEl) => {
    await formEl.validate((valid, fields) => {
        if (valid) {
            if (state.checked) {
                submitTicketForm(state.form).then((res) => {
                    state.isSuccess = true
                })
            } else {
                ElMessage({
                    message: 'Please agree to the privacy policy.',
                    type: 'warning',
                })
            }
        }
    })
}

const remoteMethod = (query) => {
    if (query) {
        state.selectLoading = true
        modelList(query).then((res) => {
            state.modelData = res.data.map((item) => {
                const category = state.category.find((e) => e.id === item.ticketProductCategoryId)
                return {
                    ...item,
                    key: `${item.ticketProductCategoryId}-${item.productModel}`,
                    label: `${category?.categoryName}/${item.productModel}`,
                    categoryName: category?.categoryName,
                }
            })

            state.selectLoading = false
        })
    } else {
        state.modelData = []
    }
}

const changeProduct = (key) => {
    const model = state.modelData.find((e) => e.key === key)
    state.form.productModel = model.productModel
    state.form.productCategoryId = model.ticketProductCategoryId
    state.form.productCategoryName = model.categoryName
}

const changeDesContent = () => {
    ruleForm.value.validateField(['describeContent'])
}

const getTicketProduct = async () => {
    ticketProductCategory().then((res) => {
        state.category = res.data
    })
}

const getTicketType = () => {
    ticketType().then((res) => {
        state.ticketTypeList = res.data
    })
}

const onSuccess = (fileList) => {
    state.form.fileList = fileList
}
</script>

<style lang="scss" scoped>
.form-container {
    width: 880px;
    height: 80vh;
    position: fixed;
    left: 50%;
    z-index: 99;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;

    .header {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 20px;
        height: 72px;
        background: #ff8217;
        border-radius: 4px 4px 0px 0px;
        font-size: 20px;
        color: #ffffff;
        position: relative;
        box-sizing: border-box;

        .close {
            width: 16px;
            height: 16px;
            cursor: pointer;
            transition: 0.5s ease;

            &:hover {
                transform: scale(1.2);
            }
        }
    }

    .success {
        position: absolute;
        left: 0;
        right: 0;
        top: 72px;
        bottom: 0;
        background: #fff;
        z-index: 99;
        font-size: 16px;
        color: #333333;
        line-height: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;

        .img {
            width: 220px;
            height: 140px;
            margin-bottom: 12px;
        }

        .btn {
            position: absolute;
            left: 50%;
            bottom: 30px;
            transform: translateX(-50%);
        }
    }

    .form {
        padding: 20px 30px 100px;
        box-shadow: var(--el-box-shadow-light);
        background: #fff;
        position: relative;
        flex: 1;
        overflow-y: auto;

        :deep(.el-form-item) {
            margin-bottom: 24px;
        }

        :deep(.el-form-item__label) {
            font-size: 18px;
            width: 200px;
        }

        .title {
            font-size: 18px;
            color: #333333;
            margin-bottom: 30px;
        }
    }

    .form-footer {
        width: 100%;
        position: absolute;
        left: 0;
        bottom: 0;
        background: #fff;
        padding-bottom: 20px;
        .checkbox {
            font-size: 16px;
            color: #606266;
            display: flex;
            align-items: center;
            padding-left: 230px;
            margin-bottom: 12px;
            .check {
                margin-right: 4px;
            }
            .privacy {
                color: #ff8217;
                cursor: pointer;
                margin-left: 4px;
            }
        }

        .btn-list {
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;

            .btn {
                width: 100px;
                min-height: 40px;
            }
        }
    }

    .dialog {
        position: absolute;
        top: 5%;
        bottom: 5%;
        left: 5%;
        right: 5%;
        background: #ffffff;
        box-shadow: 0px 1px 10px -3px rgba(163, 163, 163, 0.6);
        border-radius: 4px;
        display: flex;
        flex-direction: column;
        align-items: center;
        z-index: 9999;
        .title {
            font-size: 20px;
            font-weight: bold;
            color: #333333;
            line-height: 32px;
            width: 100%;
            text-align: center;
            margin: 30px 0;
        }

        .btn {
            margin: 20px 0;
            width: 100px;
        }

        .dest {
            flex: 1;
            width: 90%;
            font-size: 14px;
            color: #333333;
            line-height: 22px;
            overflow-y: auto;
        }

        .dest::-webkit-scrollbar {
            width: 2px; /* 修改宽度 */
            border-radius: 8px;
        }

        /* 修改滚动条轨道背景色 */
        .dest::-webkit-scrollbar-track {
            background-color: #f1f1f1;
        }

        /* 修改滚动条滑块颜色 */
        .dest::-webkit-scrollbar-thumb {
            background-color: #ccc;
            border-radius: 12px;
        }

        /* 修改滚动条滑块悬停时的颜色 */
        .dest::-webkit-scrollbar-thumb:hover {
            background-color: #555;
        }
    }

    :deep(.tox-editor-header) {
        display: none;
    }
}
</style>
